<template>
	<view>
		<uni-popup ref="personalRealName" type="dialog" :is-mask-click="false">
			<uni-popup-dialog type="info" cancelText="退出登录" confirmText="立即认证" @confirm="dialogConfirm" @close="cancel">
				<template v-slot="content">
					<view class="title">
						<p><span class="round2"></span><span class="round1"></span>
						    <span class="round"></span> 个人实名认证 <span class="round"></span>
						    <span class="round1"></span> <span class="round2"></span>
						</p>
						<img :src="imgPath" alt="" />
					</view>
					
					<view class="msg">
						<view>账号：<span>{{ $store.getters.staffInfo.mobile }}</span>
						     <personalGray class="certiyImg" />
						     <span style="color: red;">未实名认证</span>
						</view>
						<view style="margin: 10rpx 0 15rpx;">
							<i class="iconfont icon-huo"></i>
							<span>实名认证后，立得签署量，免费签合同！</span>
						</view>
						<view>
							点击查看：<a href="https://www.lksign.cn/serve/help.html?id=2" target="_blank">个人用户快速入门教程</a>
						</view>
					</view>
					
					<view class="introduce">
						1、为确保您通过励氪签平台签署的文件符合国家法律、法规要求以及励氪签为您申请制作的电子签名为您本人专有，您需要先进行个人实名认证；
						<view style="text-indent: 2em;">
						2、申请人需年满16周岁，仅支持持有：中国居民身份证、港澳台居民来往内地通行证、中国港澳台居民居住证、外国人居住证的个人进行实名认证；
						</view>
					</view>
					
				</template>		
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import personalGray from "@/components/svg/personalGray";
	export default {
		name:'personalRealName',
		components:{personalGray},
		data() {
			return {
				imgPath: require("@/static/images/person-certification.png"),
			}
		},
		methods: {
			open(){
				this.$refs.personalRealName.open('center')
			},
			dialogConfirm(){
				uni.reLaunch({url: "/pages/authentication/personal/personal"})
			},
			cancel(){
				this.$store.dispatch('LogOut').then(() => {
				    this.$tab.reLaunch('/pages/index')
                })
			},
		}
	}
</script>
<style lang="scss" scoped>
	.round {
	      height: 22rpx;
	      width: 22rpx;
	      color: #fff;
	      border-radius: 50%;
	      background: #fff;
	      display: inline-block;
	      opacity: 0.7;
	      margin: 4rpx 16rpx 0 16rpx;  
	}
	.round1 {
	      height: 20rpx;
	      width: 20rpx;
	      color: #fff;
	      border-radius: 50%;
	      background: #fff;
	      display: inline-block;
	      opacity: 0.6;
	      margin: 4rpx 16rpx 0 16rpx;  
	}
	.round2 {
	      height: 18rpx;
	      width: 18rpx;
	      color: #fff;
	      border-radius: 50%;
	      background: #fff;
	      display: inline-block;
	      opacity: 0.5;
	      margin: 4rpx 16rpx 0 16rpx;  
	}
	.msg{
		text-align: center;
		margin-top: 90rpx;
		padding: 0 40rpx;
	}
	.icon-huo{
		font-size: 34rpx;
		color: red;
		border: 2rpx solid #fff;
		background: #fff;
	}
	a{
		color: #00a660;
		text-decoration: none;
	}
	.title{
		text-align: center;
		background: #0bb175;
		color: #fff;
		height: 200rpx;
		padding-top: 50rpx;
		font-size: 32rpx;
		border-top-left-radius: 22rpx;
		border-top-right-radius: 22rpx;
		img{
			width: 150rpx;
			height: auto;
			padding-top: 20rpx;
		}
	}
	.certiyImg {
		width: 28rpx;
		height: 30rpx;
		display: inline-block;
		margin: 0 12rpx;
		vertical-align: middle;
	}
	.introduce{
		font-size: 26rpx;
		color: #999;
		text-indent: 2em;
		margin: 26rpx 0;
		padding: 0 40rpx;
		line-height: 40rpx;
	}
	::v-deep .uni-dialog-content{
		display: block;
		padding: 0;
	}
	::v-deep .uni-dialog-title{
		display: none;
	}
	::v-deep .uni-popup-dialog{
		width: 90%;
	}
	
</style>